<template>
    <div
      class="flex items-center justify-between m-[1rem] border-b-[2px] border-gray-400"
      v-for="item in consumptionState"
      :key="item.title"
      @click="showItemDetails(item)"
    >
      <div class="flex flex-wrap gap-2">
        <span class="font-bold font-myfont text-[2rem]">{{ item.title }}</span>
      </div>
      <div class="flex flex-wrap gap-2">
        <span class="font-myfont text-[2rem]">-{{ item.price }}</span>
      </div>
    </div>
  
    <van-overlay :show="show" @click="closeOverlay">
      <div class="wrapper" @click.stop>
        <div class="block">
          <div @click="closeOverlay" class="flex justify-end text-[20px]">X</div>
          <div>
            <h2 class="text-xl font-bold">{{ selectedItem.title }}</h2>
            <p class="text-lg">{{ selectedItem.price }}</p>
            <p class="text-lg">{{ selectedItem.time }}</p>
            <p class="text-lg">{{ selectedItem.type }}</p>
            <p class="text-lg">{{ selectedItem.remarks }}</p>
          </div>
        </div>
      </div>
    </van-overlay>
  </template>

<script setup>
import { ref, toRefs } from 'vue'
import { useHomeStore } from '@/store/homeStore'

const homeStore = useHomeStore()
const { consumptionState } = toRefs(homeStore)

const show = ref(false)
const selectedItem = ref({ })

const showItemDetails = (item) => {
  selectedItem.value = item
  show.value = true
}

const closeOverlay = () => {
  show.value = false
}
</script>

<style lang="css" scoped>
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  width: 70vw;
  height: 60vh;
  background-color: #fff;
  padding: 1rem;
  border-radius: 20px;
}


</style>